<template>
  <div class="shop-container">
    <ul class="shop-list" v-if="goods.length">
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>
      <li class="shop-li" @click="$router.push('/shop')">
        <img src="./images/2.jpg" alt="" />
        <div class="right-part">
          <div class="line-shop-name">
            <div class="shop-name">方中山</div>
            <ul class="supports">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
          <div class="line-score">
            <div class="left">
              <Star :score="3.6"></Star>
              <span class="score">3.6</span>
              <span class="sales">月售106单</span>
            </div>
            <div class="right">
              饱了么快送
            </div>
          </div>
          <div class="line-fee">
            ¥20起送<span>/</span>配送费约¥5
          </div>
        </div>
      </li>

      <!-- 列表最后的占位, 高度等于底部导航条, 防止商家列表的最后一个被底部导航条遮挡 -->
      <div class="place-holder"></div>
    </ul>

    <!-- 骨架屏 -->
    <ul class="skeletonList" v-else>
      <li v-for="(item, index) in 5" :key="index">
        <img src="./images/shop_back.svg" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
import Star from "../Star/Star"
import { mapState } from "vuex"
export default {
  name: "ShopList",
  computed: {
    ...mapState(["goods"]),
  },
  components: { Star },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";

.shop-list {
  border: 0;
  padding: 0;
  .shop-li {
    .bottom-border-1px(#f1f1f1);
    padding: 1.5rem 0.8rem;
    display: flex;
    img {
      width: 7.2rem;
      height: 7.5rem;
      margin-right: 1rem;
    }
    .right-part {
      flex: 1;
      .line-shop-name {
        display: flex;
        justify-content: space-between;
        .shop-name {
          width: 20rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 1.6rem;
          line-height: 1.6rem;
          color: #333;
          font-weight: 700;
          &::before {
            content: "品牌";
            vertical-align: middle;
            font-size: 1.1rem;
            padding: 0.2rem;
            margin-right: 0.5rem;
            background-color: #ffd930;
          }
        }
        .supports {
          display: flex;
          li {
            font-size: 1rem;
            height: 1.3rem;
            color: #999;
            border: 0.1rem solid #f1f1f1;
            padding: 0 0.2rem;
            margin-right: 0.1rem;
            border-radius: 0.2rem;
          }
        }
      }
      .line-score {
        display: flex;
        justify-content: space-between;
        margin: 1.8rem 0 0.8rem;
        .left {
          display: flex;
          // .star {
          //   display: flex;
          //   .star-item {
          //     width: 10rem;
          //     height: 10rem;
          //     margin-right: 3rem;
          //     &.on {
          //       .bg-img("../Star/images/star24_on");
          //       background-size: 10rem 10rem;
          //     }
          //     &.half {
          //       .bg-img("../Star/images/star24_half");
          //       background-size: 10rem 10rem;
          //     }
          //     &.off {
          //       .bg-img("../Star/images/star24_off");
          //       background-size: 10rem 10rem;
          //     }
          //   }
          // }
          .score {
            font-size: 1rem;
            color: #ff6000;
            margin-right: 0.3rem;
          }
          .sales {
            font-size: 1rem;
            color: #666;
          }
        }
        .right {
          font-size: 1rem;
          color: @theme-color;
          border: 0.1rem solid @theme-color;
          border-radius: 0.2rem;
        }
      }
      .line-fee {
        font-size: 1.1rem;
        color: #666666;
        span {
          color: #d5d8da;
          margin: 0 0.2rem;
        }
      }
    }
  }
  .place-holder {
    height: 5rem;
  }
}
</style>
